<template>
    <div class="category">
        <Header></Header>
        <div class="category-main">
            <!-- 轮播图 -->
            <van-swipe class="content-swiper" :autoplay="3000" lazy-render>
                <van-swipe-item>
                    <img src="/static/mylove.jpg" style="width: 100%;" />
                </van-swipe-item>
            </van-swipe>
            <div class="card">
                <div class="card-title">
                    <div class="name">四季款</div>
                    <div class="desc">四季款</div>
                </div>
                <GoodsList></GoodsList>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'cateGory',
})
</script>

<script lang="ts" setup>
import Header from '@/components/Header/index.vue'
import GoodsList from '@/components/GoodsList/index.vue'
</script>

<style scoped>
.category-main {
    position: relative;
    top: 74px;
    left: 0;
}

.category-main .content-swiper {
    height: 148px;
    overflow: hidden;
}

.category-main .card {
    background-color: #fff;
}

.category-main .card .card-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.category-main .card .card-title .name {
    color: #333;
    font-size: 16px;
}
</style>